<template>
  <div>
    <ItemHeader :menuArr="[{name: '付费计划', route: '/dashboardAuth/mybuyed'}]">
      <div slot="leftBtn" class="filter-box">
        <label>筛选：</label>
        <select v-model="searchData.statusText" name="statusText" @change="search()">
          <option v-for="item in statusTextArr" :value="item.val" :key="item.val">{{item.txt}}</option>
        </select>
      </div>
    </ItemHeader>
    <PlanItem :planList="planList.list" from = 'dashboard' @buyNowFn="buy" />
    <button v-if="planList.total > planList.list.length"
      class="load-more-btns small-one ftz16"
      @click="loadMore">
      <template v-if="planList.isLoadingMore">
        <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
        <span>正在加载，请稍候......</span>
      </template>
      <span v-else>点击加载更多...</span>
    </button>
  </div>
</template>

<script>
import {
  mySubscribedPlan
} from '@/service/api'
import ItemHeader from '@/components/dashboardAuth/item-header'
import PlanItem from '@/components/plan/plan-item'
export default {
  components: {
    ItemHeader,
    PlanItem
  },
  data () {
    return {
      planList: {
        list: [],
        isLoadingMore: false
      },
      searchData: {
        pageSize: 6,
        pageNum: 1,
        statusText: ''
      },
      statusTextArr: [
        {
          val: '',
          txt: '全部'
        },
        {
          val: '预售',
          txt: '预售'
        },
        {
          val: '进行中',
          txt: '进行中'
        },
        {
          val: '进行结束',
          txt: '进行结束'
        },
        {
          val: '停售',
          txt: '停售'
        }
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (window.layer) {
        this.showLoadingModal()
      }
      this.initData()
      // this.initSelect()
    })
  },
  methods: {
    showLoadingModal () {
      this.layerLoad = window.layer.load(0, {
        shade: false
      })
    },
    closeLoadingModal () {
      if (window.layer) {
        window.layer.close(this.layerLoad)
      }
    },
    initSelect () {
      window.layui.use(['form'], () => {
        let form = window.layui.form
        form.on('select', (data) => {
          this.initData()
        })
      })
    },
    initData () {
      this.getPlanList().then((res) => {
        if (res.status === 200) {
          this.planList.list = res.data.data.list
          this.planList.total = res.data.data.total
          this.closeLoadingModal()
        }
      })
    },
    search () {
      this.searchData.pageNum = 1
      this.initData()
    },
    buy (item) {
      this.$router.push('/plan/' + item.planId)
    },
    // 计划列表
    async getPlanList () {
      let list = await mySubscribedPlan(this.searchData)
      return list
    },
    loadMore () {
      this.planList.isLoadingMore = true
      this.searchData.pageNum++
      this.getPlanList().then((res) => {
        this.planList.isLoadingMore = false
        if (res.status === 200) {
          this.planList.list.push(...res.data.list)
        } else {
          this.searchData.pageNum.pageNum--
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.filter-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 135px;
  select {
    border: 1px solid #a2a2a2;
    height: 30px;
  }
}
</style>
